<template>
  <div>
    <van-nav-bar title="分类" fixed />
    <!-- 商品分类 -->
    <van-row>
      <!-- 商品左侧 -->
      <van-col span="6">
        <van-sidebar v-model="active">
          <van-sidebar-item v-for="item in fenData" :title="item.cat_name" />
        </van-sidebar>
      </van-col>
      <!-- 商品内容 -->
      <van-col span="18">
        <div v-for="items in fenData[active]?.children">
          <h4>{{ items.cat_name }}</h4>
          <!-- 跳转到商品 携带cat_id -->
          <router-link :to="'/goods/' + items.cat_id">
            <!-- 宫格 -->
            <van-grid :column-num="4">
              <van-grid-item
                v-for="itemx in items.children"
                :icon="itemx.cat_icon"
                :text="itemx.cat_name"
              />
            </van-grid>
          </router-link>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
//自定义切换数据
let active = ref(0);
//自定义分类数据
let fenData = ref([]);
//引入分类接口
import { fenApi } from "@/api/api";
fenApi().then((res) => {
  fenData.value = res.data.message;
});
</script>

<style lang="scss" scoped></style>
